import React from 'react';
import {sessionManager} from '../../utils/sessionStorage'
import axios from 'axios';
import { Button,Form} from 'antd';
import asyncComponent from '../../components/echats/AsyncComponent';
import { injectIntl } from 'react-intl';

const LineReact = asyncComponent(() => import(/* webpackChunkName: "LineReact" */'../../components/echats/LineReact'))  //折线图组件

@Form.create()
class UserChargeReport extends React.Component {
    constructor(props) {
        super(props);
        this.marginStyle ={
            marginRight:20
        };
        this.selectStyle ={
            float:'left'
        };
        const common = this.props.intl.messages.common;
        this.state = {
            info:{},
            lineOption :{
                title: {
                    text: '折线图堆叠'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                    name: common.unitsVolt,
                },
                series: []
            },
            currentLineOption :{
                title: {
                    text: '折线图堆叠'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                    name: common.unitsAmpere,
                },
                series: []
            },
            socLineOption :{
                title: {
                    text: '折线图堆叠'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    type: 'value',
                    name: common.unitsPercentage,
                },
                series: []
            }
        }
    }

    componentWillMount(){
        const common = this.props.intl.messages.common;
        let orderInfo=sessionManager.get('orderInfo');
        axios.get('/api/order/detail',{
            params:{
                orderId:orderInfo.orderId
            }
        }).then(res => {
            if(res&&res.data){
            let nameArr = [];
            let voltage = {
                name:common.voltage,
                type:'line',
                data:[],
                time:[],
                smooth :true
            };
            let voltageCar={
                name:common.carVoltage,
                type:'line',
                data:[],
                time:[],
                smooth :true
            }
            let currentCar={
                name:common.carCurrent,
                type:'line',
                data:[],
                time:[],
                smooth :true
            }
            let current={
                name:common.Current,
                type:'line',
                data:[],
                smooth :true
            }

            let soc={
                name:'SOC',
                type:'line',
                data:[],
                smooth :true
            }
            for(let i=0;i<res.data.his.length;i++){
                voltage.data[i] =res.data.his[i].voltage;
                voltageCar.data[i]=res.data.his[i].voltageCar;
                currentCar.data[i]=res.data.his[i].currentCar;
                current.data[i] =res.data.his[i].current;
                soc.data[i] =res.data.his[i].soc;
                voltage.time[i] =res.data.his[i].time;
            }
            this.setState(Object.assign(this.state.lineOption, {legend: {'data':nameArr},series:[...[voltage],...[voltageCar]],xAxis:{'data':voltage.time,type: 'category',boundaryGap: false,}}));
            this.setState(Object.assign(this.state.currentLineOption, {legend: {'data':nameArr},series:[...[current],...[currentCar]],xAxis:{'data':voltage.time,type: 'category',boundaryGap: false,}}));
            this.setState(Object.assign(this.state.socLineOption, {legend: {'data':nameArr},series:[soc],xAxis:{'data':voltage.time,type: 'category',boundaryGap: false,}}));
            this.setState(Object.assign(this.state.info,res.data.info));
            // console.log(this.state.lineOption,this.state.socLineOption)
            }
        });
    }
    render() {
        const common = this.props.intl.messages.common;
        return (
            <div>
                <div>{common.powerStationName}：{this.state.stubGroupName}&nbsp;&nbsp;&nbsp;&nbsp;
                    {common.EquipmentNo}:{this.state.stubId}&nbsp;&nbsp;&nbsp;&nbsp;
                    {common.licenseNumber}:{this.state.carLicenseNo?this.state.carLicenseNo:common.noLicenseNumber}&nbsp;&nbsp;&nbsp;&nbsp;
                    {common.vinOfCar}:{this.state.vin?this.state.vin:common.noVIN}&nbsp;&nbsp;&nbsp;&nbsp;
                    {common.chargeCard}:{this.state.cardNumber?this.state.cardNumber:common.noChargeCard}
                </div>
                <div className="textCenter">电压折线图</div>
                <LineReact option={this.state.lineOption}/>
                <div className="textCenter">电流折线图</div>
                <LineReact option={this.state.currentLineOption}/>
                <div className="textCenter">SOC折线图</div>
                <LineReact option={this.state.socLineOption}/>
            </div>
        );
    }
}
export default injectIntl(UserChargeReport);